<template>
  <div class="app-container">
    <!-- 状态为1时显示直播设置页面 -->
    <LiveSetting v-if="status === 1" @toLive="openLiving" />
    <!-- 状态为2时显示进入页面 -->
    <div v-if="status === 2" class="before-enter">
      <div class="center">
        <img src="@/assets/live/beforeEnter.png" class="picture" />
        <div class="enter-btn" @click="openLiving">进入直播间</div>
      </div>
    </div>
    <!-- 状态为3时显示结束页面 -->
    <livingEnd v-if="status === 3" />
  </div>
</template>

<script setup lang="ts">
import LiveSetting from "./components/LiveSetting.vue";
import livingEnd from "./components/LivingEnd.vue";
import { useRouter } from "vue-router";

//状态管理
const status = ref(1); //1: 直播设置，2:直播前 3: 直播结束
const router = useRouter();
const openLiving = () => {
  const route = router.resolve({ path: "/living" });
  window.open(route.href, "_blank");
};
const updateStatus = (pageStatus: number) => {
  status.value = pageStatus;
};
provide("updateStatus", updateStatus);
</script>
<style lang="scss" scoped>
.before-enter {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #f0f5ff 0%, #fbfcfe 100%);
  box-shadow:
    inset 2px 1px 2px 1px #ffffff,
    0px 4px 8px 0px #eaf0ff;
  border-radius: 30px;

  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    .picture {
      width: 432px;
    }
    .enter-btn {
      width: 432px;
      height: 48px;
      background: #1664ff;
      border-radius: 4px;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
